---
layout: default
---

<!-- Post Header -->
<style type="text/css">
    header.intro-header{
        background-image: url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}')
    }

    .catalog-container {
      padding: 0px;
    }
    .side-catalog {
      display: block;
      overflow: auto;
      height: 100%;
      padding-bottom: 40px;
      width: 195px;
    }
    .side-catalog.fixed {
      position: fixed;
      top: -21px;
    }
    .side-catalog.fold .catalog-toggle::before {
      content: "+";
    }
    .side-catalog.fold .catalog-body {
      display: none;
    }
    .side-catalog .catalog-toggle::before {
      content: "−";
      position: relative;
      margin-right: 5px;
      bottom: 1px;
    }
    .side-catalog .catalog-body {
      position: relative;
      list-style: none;
      height: auto;
      overflow: hidden;
      padding-left: 0px;
      padding-right: 5px;
      text-indent: 0;
    }
    .side-catalog .catalog-body li {
      position: relative;
      list-style: none;
    }
    .side-catalog .catalog-body li a {
      padding-left: 10px;
      max-width: 180px;
      display: inline-block;
      vertical-align: middle;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      text-decoration: none;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .side-catalog .catalog-body .h1_nav,
    .side-catalog .catalog-body .h2_nav,
    .side-catalog .catalog-body .h3_nav {
      margin-left: 0;
      font-size: 13px;
      font-weight: bold;
    }
    .side-catalog .catalog-body .h4_nav,
    .side-catalog .catalog-body .h5_nav,
    .side-catalog .catalog-body .h6_nav {
      margin-left: 10px;
      font-size: 12px;
    }
    .side-catalog .catalog-body .h4_nav a,
    .side-catalog .catalog-body .h5_nav a,
    .side-catalog .catalog-body .h6_nav a {
      max-width: 170px;
    }
    .side-catalog .catalog-body .active {
      border-radius: 4px;
      background-color: #F5F5F5;
    }
    .side-catalog .catalog-body .active a {
      color: #0085a1!important;
    }
    @media (max-width: 1200px) {
      .side-catalog {
        display: none;
      }
    }
</style>
<header class="intro-header" >
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <div class="tags">
                        {% for tag in page.tags %}
                        <a class="tag" href="{{ site.baseurl }}/tags/#{{ tag }}" title="{{ tag }}">{{ tag }}</a>
                        {% endfor %}
                    </div>
                    <h1>{{ page.title }}</h1>
                    {% comment %}
                        always create a h2 for keeping the margin , LiangChengDeYe
                    {% endcomment %}
                    {% comment %} if page.subtitle {% endcomment %}
                    <h2 class="subheading">{{ page.subtitle }}</h2>
                    {% comment %} endif {% endcomment %}
                    <span class="meta"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;{% if site.author %}{{ site.author }}{% else %}{{ site.title }}{% endif %}&nbsp;&nbsp;&nbsp;<i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;&nbsp;{{ page.date | date: "%Y-%m-%d" }}&nbsp;&nbsp;&nbsp;<i class="fa fa-check-square-o" aria-hidden="true"></i>{{ content | strip_html | strip_newlines | size }}&nbsp;words&nbsp;&nbsp;<span id="busuanzi_container_page_pv">
                    <i class="fa fa-eye" aria-hidden="true"></i>&nbsp;<span id="busuanzi_value_page_pv">&</span>&nbsp;views</span>
                    <br/>

                    <p></p>
                     {% if page.updated %}
                     Updated on {{ page.updated | date: "%B %-d, %Y" }}
                     {% endif %}
                   </span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">
        
    <!-- Post Container -->
            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                post-container">
                
				{{ content }}

                <hr>
                
           

                <ul class="pager">
                    {% if page.previous.url %}
                    <li class="previous">
                        <a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post</a>
                    </li>
                    {% endif %}
                    {% if page.next.url %}
                    <li class="next">
                        <a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;</a>
                    </li>
                    {% endif %}
                </ul>

                <br>
                <!-- AddToAny BEGIN -->

                <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
                    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
                    <a class="a2a_button_wechat"></a>
                    <a class="a2a_button_sina_weibo"></a>
                    <a class="a2a_button_facebook"></a>
                    <a class="a2a_button_twitter"></a>
                    <a class="a2a_button_linkedin"></a>
                    <a class="a2a_button_google_plus"></a>
                </div>
               <script async src="https://static.addtoany.com/menu/page.js"></script>
                <!-- AddToAny END -->
              
                {% if site.disqus_username %}
                <!-- disqus 评论框 start -->
                <div class="comment">
                    <div id="disqus_thread" class="disqus-thread"></div>
                </div>
                <!-- disqus 评论框 end -->
                {% endif %}



            </div>
            <!-- Side Catalog Container -->
        {% if page.catalog %}
            <div class="
                col-lg-2 col-lg-offset-0
                visible-lg-block
                sidebar-container
                catalog-container">
                <div class="side-catalog">
                    <hr class="hidden-sm hidden-xs">
                    <h5>
                        <a class="catalog-toggle" href="#">CATALOG</a>
                    </h5>
                    <ul class="catalog-body"></ul>
                </div>
            </div>
        {% endif %}

    <!-- Sidebar Container -->
            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                sidebar-container">

                <!-- Featured Tags -->
                {% if site.featured-tags %}
                <section>
                    <hr class="hidden-sm hidden-xs">
                    <h5><a href="/tags/">FEATURED TAGS</a></h5>
                    <div class="tags">
        				{% for tag in site.tags %}
                                   {% if tag[1].size > site.featured-condition-size %}
                				<a href="{{ site.baseurl }}/tags/#{{ tag[0] }}" title="{{ tag[0] }}" rel="{{ tag[1].size }}">
                                    {{ tag[0] }}
                                </a>
                            {% endif %}
        				{% endfor %}
        			</div>
                </section>
                {% endif %}

                <!-- Friends Blog -->
                {% if site.friends %}
                <hr>
                <h5>FRIENDS</h5>
                <ul class="list-inline">
                    {% for friend in site.friends %}
                        <li><a href="{{friend.href}}">{{friend.title}}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
            </div>
        </div>
    </div>
</article>


{% if site.disqus_username %}
<!-- disqus 公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = "{{site.disqus_username}}";
    var disqus_identifier = "{{page.id}}";
    var disqus_url = "{{site.url}}{{page.url}}";

    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<!-- disqus 公共JS代码 end -->
{% endif %}


{% if site.anchorjs %}
<!-- async load function -->
<script>
    function async(u, c) {
      var d = document, t = 'script',
          o = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      o.src = u;
      if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
      s.parentNode.insertBefore(o, s);
    }
</script>
<!-- anchor-js, Doc:http://bryanbraun.github.io/anchorjs/ -->
<script>
    async("http://cdn.bootcss.com/anchor-js/1.1.1/anchor.min.js",function(){
        anchors.options = {
          visible: 'always',
          placement: 'right',
          icon: '#'
        };
        anchors.add().remove('.intro-header h1').remove('.subheading').remove('.sidebar-container h5');
    })
</script>
<style>
    /* place left on bigger screen */
    @media all and (min-width: 800px) {
        .anchorjs-link{
            position: absolute;
            left: -0.75em;
            font-size: 1.1em;
            margin-top : -0.1em;
        }
    }
</style>
{% endif %}
